<script setup lang="ts">
import {useUserPinia} from '~/stores/user'
import {storeToRefs} from "pinia";
import {onMounted, ref, onBeforeMount} from "vue";

import HP5050 from "~/public/shop/HP5050_banner-Lido_03_Ivory_Boucle_1011-992x1120_672x448.webp"
// 用tm代替t，因为tm是响应式的而且可以解析对象
const {locale, setLocale, tm} = useI18n()
const userStore = useUserPinia()
const {token, rating_five} = storeToRefs(userStore);


const online_list1 = ref([
    {
      id: "1",
      title: '批量商户入驻',
      subTitle: "API接口和技术驱动的KYB验证手段简化商户审批和入驻流程。",
      src: 'https://cdn.marmot-cloud.com/page/antom_official_website/_next/static/media/icon-interest-point1.2fba88af.svg'
    },
    { 
      id: "2",
      title: '本地化支付方式',
      subTitle: "网罗全球主流本地流行的支付方式，提升顾客的支付成功率。",
      src: 'https://cdn.marmot-cloud.com/page/antom_official_website/_next/static/media/icon-interest-point2.11ca4506.svg'
    },
    { 
      id: "3",
      title: '优化的资金链路',
      subTitle: "革新购物车付款和资金结算流程，提升资金处理效率。",
      src: 'https://cdn.marmot-cloud.com/page/antom_official_website/_next/static/media/icon-interest-point3.0646da13.svg'
    },
    { 
      id: "4",
      title: '反欺诈保障',
      subTitle: "行业领先的风控系统实时守护交易安全和平台形象。",
      src: 'https://cdn.marmot-cloud.com/page/antom_official_website/_next/static/media/icon-interest-point4.fb007b23.svg'
    },
 ])


 const carousel_Images = computed(() => {
  return [
    {
        headImage: 'https://mdn.alipayobjects.com/huamei_pwpjvv/afts/img/A*W7pcSpEYASsAAAAAAAAAAAAADmesAQ/fmt.webp',
        subImage: 'https://mdn.alipayobjects.com/huamei_pwpjvv/afts/img/A*3NAKRIZyOYwAAAAAAAAAAAAADmesAQ/fmt.webp'
    }
  ]
})
 const cover_images = computed(() => {
  return [
    {
        headImage: 'https://gw.alipayobjects.com/mdn/huamei_pwpjvv/afts/img/A*8_-8TIncRfgAAAAAAAAAAAAADmesAQ/fmt.webp',
        subImage: 'https://mdn.alipayobjects.com/huamei_pwpjvv/afts/img/A*8_-8TIncRfgAAAAAAAAAAAAADmesAQ/fmt.webp'
    }
  ]
})

const shops_list = ref([
    { 
      id: "1",
      title: '高效入驻',
      subTitle: "通过API接口批量传输商户审核资料，提升入驻效率。",
      src: 'https://cdn.marmot-cloud.com/page/antom_official_website/_next/static/media/icon-flexible-selection.7bc535f2.svg'
    },
    { 
      id: "2",
      title: '化繁为简',
      subTitle: "满足监管和风控要求的前提下，简化KYB验证字段，加速商户入驻。",
      src: 'https://cdn.marmot-cloud.com/page/antom_official_website/_next/static/media/icon-simplify-complexity.522ee5cb.svg'
    },
    { 
      id: "3",
      title: '前沿风控',
      subTitle: "智能化的风控算法和超过10年的风控经验，实时识别可疑商户。",
      src: 'https://cdn.marmot-cloud.com/page/antom_official_website/_next/static/media/icon-security.4aa12132.svg'
    },
    { 
      id: "4",
      title: '本土适配',
      subTitle: "基于当地KYB要求分地区定验证逻辑，多语言操作台提供友好体验。",
      src: 'https://cdn.marmot-cloud.com/page/antom_official_website/_next/static/media/icon-localization.946e8db2.svg'
    },
])

const lists_bottom = ref([
{ 
      id: "1",
      title: '规避拒付资损',
      subTitle: "基于图计算、深度学习等前沿科技的实时风控决策，能有效拦截盗卡交易，降低拒付几率。",
      src: 'https://cdn.marmot-cloud.com/page/antom_official_website/_next/static/media/icon-protest.191f7d95.svg'
    },
    { 
      id: "2",
      title: '守住监控指标',
      subTitle: "将平台盗卡率和拒付率控制在卡组的监控水位之下，避免卡组罚款甚至清退风险。",
      src: 'https://cdn.marmot-cloud.com/page/antom_official_website/_next/static/media/icon-monitor.0089d94d.svg'
    },
    { 
      id: "3",
      title: '维护平台形象',
      subTitle: "行业领先的风控技术让欺诈交易无所遁形，持续营造安全、健康的平台交易环境。",
      src: 'https://cdn.marmot-cloud.com/page/antom_official_website/_next/static/media/icon-sentiment.9d6c4ff1.svg'
    },
])


/**
 * 屏幕尺寸
 */
const screenSize = ref({width: 0, height: 0});


// 更新屏幕尺寸的方法
const updateScreenSize = () => {
  screenSize.value = {
    width: window.innerWidth,
    height: window.innerHeight,
  };
  // console.log("屏幕尺寸", screenSize.value.width)
};



onMounted(() => {
  window.addEventListener('resize', updateScreenSize);
  // 初始化屏幕尺寸
  updateScreenSize();

})

// 组件卸载时移除事件监听器
onUnmounted(() => {
  window.removeEventListener('resize', updateScreenSize);
});

</script>

<template>
  <v-app>
    <!-- 主图-->
     <banner-main
      :is-show-doc="false"
      themeColor="black"
      :lists="carousel_Images" 
      title="电商平台解决方案" 
      subTitle="旨在帮助电商平台利用前沿技术打通经营环节、提升运营效率，从入驻商户的资质审查到款项的高效分发，均能通过一站式解决方案轻松实现。"
     ></banner-main>
     <div class="mx-auto d-flex justify-center w-8/12">
            <div 
            v-for="bl in online_list1"
            :key="bl.id"
            class="bg-white d-flex justify-center align-center rounded-lg"
            >
            <div class="w-3/12 d-flex flex-column align-center h-[400px] w-[340px] text-center px-10">
                <div>
                    <v-img width="200px" height="200px" cover :src="bl.src"/>
                </div>
                <span class="font-semibold text-2xl mt-4  mb-10">{{ bl.title }}</span>
                <span class="">{{ bl.subTitle }}</span>
            </div>
            </div>
      </div>
      <div class="font-semibold text-3xl text-center mt-40 mb-40">高效的批量商户入驻</div>
      <v-sheet class="w-9/12 mx-auto d-flex flex-wrap">
          <div v-for="item in shops_list" :key="item.id" class="w-6/12 d-flex align-center justify-center mb-10">
              <div class="d-flex align-center justify-center w-11/12 py-16 pr-10 bg-[#f9fafb] rounded-[24px]">
                <div class="h-[80px] w-80px mx-10">
                  <v-img width="80px" height="80px" :src="item.src"></v-img>
                </div>
                <div class="d-flex flex-column">
                      <span class="text-[#000] text-[24px] font-bold">{{ item.title }}</span>
                      <span class="text-[rgba(0,0,0,.6)] text-[18px] mt-4">{{ item.subTitle }}</span>
                  </div>
              </div>
          </div>
      </v-sheet>
      <div class="w-9/12 mx-auto mt-20">
          <v-img src="https://cdn.marmot-cloud.com/storage/2024/07/04/20f2b798-5031-4746-a259-4db3d5aaf337.png"></v-img>
      </div>

      <div class="w-full d-flex justify-end bg-[#001966] mt-40">
            <div class="w-5/12 d-flex flex-column justify-center">
                <div class="title text-7xl text-white font-bold">广泛的支付方式覆盖</div>
                <div class="mt-10">
                <span class="sub-tiele text-white text-2xl">支持电子钱包、银行卡、先买后付等国际主流和本地常用的支付方式，让顾客使用他们熟悉且信赖的付款渠道，提升结账体验。</span>
                </div>
                <div class="d-flex align-center text-white mt-10">
                <NuxtLink to="/contact-us">
                    <v-btn class="px-18" rounded size="x-large" color="primary">了解更多</v-btn>
                </NuxtLink>
                </div>
            </div>
            <div class="w-6/12 d-flex justify-center align-center">
                <v-img class="w-9/12" src="https://gw.alipayobjects.com/mdn/huamei_pwpjvv/afts/img/A*8_-8TIncRfgAAAAAAAAAAAAADmesAQ/fmt.webp"></v-img>
            </div>
      </div>
      <div class="font-semibold text-3xl text-center mt-40 mb-40">高效的分账和结算</div>
      <div class="mx-auto d-flex justify-between w-8/12">
            <div 
            v-for="bl in lists_bottom"
            :key="bl.id"
            class="bg-white d-flex justify-center align-center rounded-lg"
            >
            <div class="w-3/12 d-flex flex-column align-center h-[400px] w-[340px] text-center px-10">
                <div>
                    <v-img width="80px" height="80px" cover :src="bl.src"/>
                </div>
                <span class="font-semibold text-2xl mt-4  mb-10">{{ bl.title }}</span>
                <span class="">{{ bl.subTitle }}</span>
            </div>
            </div>
      </div>
      <div class="w-9/12 mx-auto mt-20">
          <v-img src="https://gw.alipayobjects.com/mdn/huamei_un7pt7/afts/img/A*OVFAQr_kSt4AAAAAAAAAAAAADsOrAQ/fmt.webp"></v-img>
      </div>

    <footer-other></footer-other>

  </v-app>

</template>

<style scoped>

</style>